<template>
  <div class="all-circle">
    <nav-bar title="所有圈子"></nav-bar>
    <van-cell title="学习" value="" size="large"/>
    <van-grid class="all-circle-gird" :gutter="10">
      <van-grid-item class="all-circle-grid-item"  v-for="(item,index) in study" @click="$router.push('/index/explore/circledetailed?id='+item.id)">
        <van-image width="50px" height="50px" cover round  :src="item.head"></van-image>
        <span>{{item.circleName}}</span>
      </van-grid-item>
    </van-grid>

    <van-cell title="比赛" value="" size="large"/>
    <van-grid class="all-circle-gird" :gutter="10">
      <van-grid-item class="all-circle-grid-item" v-for="(item,index) in play"  @click="$router.push('/index/explore/circledetailed?id='+item.id)">
        <van-image width="50px" height="50px" cover round  :src="item.head"></van-image>
        <span>{{item.circleName}}</span>
      </van-grid-item>
    </van-grid>

    <van-cell title="社团" value="" size="large"/>
    <van-grid class="all-circle-gird" :gutter="10">
      <van-grid-item class="all-circle-grid-item" v-for="(item,index) in team"  @click="$router.push('/index/explore/circledetailed?id='+item.id)">
        <van-image width="50px" height="50px" cover round  :src="item.head"></van-image>
        <span>{{item.circleName}}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar/NavBar";

export default {
  name: "AllCircle",
  components: {
    NavBar
  },
  data() {
    return {
      type: [],
      study: [],
      team: [],
      play: []
    }
  },
  created() {
    this.getCircleType();
    this.request();
  },
  methods: {
    getCircleType() {
      this.type = [...JSON.parse(localStorage.getItem('circleType'))];
    },
    getStudy() {
      return axios.get('/circle/getByCondition', {
        params: {typeId: 1, pageSize: 20},
        headers: {isShowFullLoading: 'F'}
      })
    },
    getTeam() {
      return axios.get('/circle/getByCondition', {
        params: {typeId: 3, pageSize: 20},
        headers: {isShowFullLoading: 'F'}
      })
    },
    getPlay() {
      return axios.get('/circle/getByCondition', {
        params: {typeId: 2, pageSize: 20},
        headers: {isShowFullLoading: 'F'}
      })
    },
    request() {
      return axios.all([this.getStudy(), this.getPlay(), this.getTeam()])
          .then(axios.spread((study, play, team) => {
            this.study = study.result.result;
            this.play = play.result.result;
            this.team = team.result.result;
            console.log(study.result.result, play.result.result, team.result.result);
          }));
    }
  }
}
</script>

<style scoped>
.all-circle-gird {
  margin: 10px 0;
}

.all-circle-grid-item {
  font-size: 11px;
}
</style>
